<!-- html -->
<template>
  <h2 class="h2">{{ title }}</h2>
  <span class="span3">父组件</span>
  <br>
  <span class="span2">子组件内容：{{ childText }}</span>
  <button class="button1" @click="getChildText">获取子组件内容</button>
  <button class="button1" @click="changeChildText">修改内容</button>
  <hr class="hr1">
  <span class="span3">子组件</span>
  <br>
  <exposeTest1Child ref="childObj" />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'exposeTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref } from 'vue'
import exposeTest1Child from '@/components/componenttransmit/ExposeTest1Child.vue'
//数据
let title = ref('expose + ref，父组件<=子组件')
let childText = ref('')
let childObj = ref()
//方法
function getChildText() {
  console.log('childObj：', childObj)
  childText.value = childObj.value.text
}
function changeChildText() {
  childText.value += '-'
}
</script>

<!-- 样式 -->
<style scoped></style>